<template>
    <div class="container">
        <TridentNavBar v-if="groupChat || friend" leftGotoPath="/">
            <template #left><i class="iconfont icon-zuojiantou"></i></template>
            <template #default v-if="route.query.mode == '1'">{{friend?.info.username}}</template>
            <template #default v-else>{{groupChat?.name}}({{ groupChat?.member.length }})</template>
            <template #right><i class="iconfont icon-gengduo" @click="$router.push('/chatInfo?mode=' + route.query.mode + '&id=' + route.query.id + '&gid=' + route.query.gid)"></i></template>
        </TridentNavBar>

        <!-- 消息区域开始 -->
        <div class="message-wrap">
            <van-pull-refresh v-model="loading" @refresh="handleLoadMore">
                <!-- 骨架屏区域 -->
                 <div class="skeleton-item" v-for="(index) in 7" :key="index" v-if="isSkeleton">
                    <van-skeleton>
                        <template #template>
                            <!-- 左边接收消息骨架屏 -->
                            <div class="skeleton-left-box" v-if="(index%2) != 0">
                                <van-skeleton-paragraph style="width: 50px;height: 50px;border-radius: 25px;"/>
                                <div class="text">
                                    <van-skeleton-paragraph row-width="20%" style="margin-bottom: 10px;"/>
                                    <van-skeleton-paragraph row-width="40%" style="height: 40px;border-radius: 10px;"/>
                                </div>
                            </div>

                            <!-- 右边发送消息骨架屏 -->
                            <div class="skeleton-right-box" v-else>
                                <div class="text">
                                    <van-skeleton-paragraph row-width="20%" style="margin-bottom: 10px;"/>
                                    <van-skeleton-paragraph row-width="40%" style="height: 40px;border-radius: 10px;"/>
                                </div>
                                <van-skeleton-paragraph style="width: 50px;height: 50px;border-radius: 25px;"/>
                            </div>
                        </template>
                    </van-skeleton>
                 </div>

                <div v-for="(item, index) in messageList" :key="index">
                    <!-- 接收消息区域开始 -->

                    <!-- 群公告区域开始 -->
                    <template v-if="item.type == 6">
                        <div class="notice-wrap ellipsis-1" @click="$router.push('/notice?gid='+ item.to_uid)">
                            <i class="iconfont icon-tongzhi"></i> 点击查看群公告：{{ item.contents }}</div>
                    </template>
                    <!-- 群公告区域结束 -->
                    <template v-else>
                        <div class="msg-to-wrap" v-if="item.from_uid != userStore.profile.user.uid">
                            <!-- 头像区域开始 -->
                            <div class="avatar-box" @click="$router.push('/friendDetail?id=' + friend?.id)">
                                <van-image
                                    width="50"
                                    height="50"
                                    fit="contain"
                                    :src="item.from_user?.avatar_url ? global.MINIO_FILE_DOMAIN + item.from_user?.avatar_url : 'src/assets/images/default_avatar.png'"
                                />
                            </div>
                            <!-- 头像区域结束 -->

                            <!-- 内容区域开始 -->
                            <div class="content-box">
                                <div class="title-panel">
                                    <p class="username" v-if="route.query.mode == '2'">{{ item.from_user?.username }}</p>
                                    <p class="time">{{ formatTime(item.create_time, 'HH:mm') }}</p>
                                </div>
                                <div class="msg-to-panel">
                                    <!-- 文本消息 -->
                                    <div class="message" v-if="item.type == 1">{{ item.contents }}</div>
                                    
                                    <!-- 图片消息 -->
                                    <div class="message" v-else-if="item.type == 2">
                                        <van-image
                                            width="100"
                                            height="100"
                                            fit="contain"
                                            :src="global.MINIO_FILE_DOMAIN + item.image_url"
                                            @click="handleShowImagePreview(global.MINIO_FILE_DOMAIN + item.image_url)"
                                        />
                                    </div>

                                    <!-- 位置消息 -->
                                    <div class="message" v-else-if="item.type == 5">
                                        <TridentMap
                                            width="80px"
                                            height="80px"
                                            :zoom="7"
                                            :id="index"
                                            :currentPosition="{lat: item.lat, lng: item.lng}"
                                        />
                                        <div class="masking" @click="handleShowPosition({lat: item.lat as never, lng: item.lng as never})"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- 内容区域结束 -->
                        </div>
                    </template>
                    <!-- 接收息区域结束 -->

                    <!-- 发送消息区域开始 -->
                    <div class="msg-from-wrap" v-if="item.from_uid == userStore.profile.user.uid">
                        <!-- 内容区域开始 -->
                        <div class="content-from-box">
                            <div class="content-from-panel">
                                <div class="time">{{ formatTime(item.create_time, 'HH:mm') }}</div>
                                <div class="msg-panel">
                                    <div v-if="item.type == 1">{{ item.contents }}</div>
                                    <div v-else-if="item.type == 2">
                                        <van-image
                                            width="100"
                                            height="100"
                                            fit="contain"
                                            :src="global.MINIO_FILE_DOMAIN + item.image_url"
                                            @click="handleShowImagePreview(global.MINIO_FILE_DOMAIN + item.image_url)"
                                        />
                                    </div>

                                    <!-- 位置消息 -->
                                    <div v-else-if="item.type == 5">
                                        <TridentMap
                                            width="80px"
                                            height="80px"
                                            :zoom="7"
                                            :id="index"
                                            :currentPosition="{lat: item.lat, lng: item.lng}"
                                        />
                                        <div class="masking" @click="handleShowPosition({lat: item.lat as never, lng: item.lng as never})"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 内容区域结束 -->

                        <!-- 头像区域开始 -->
                        <div class="avatar-from-box" @click="$router.push('/me')">
                            <van-image
                                width="50"
                                height="50"
                                fit="contain"
                                :src="userStore.profile.user.avatar_url ? global.MINIO_FILE_DOMAIN + userStore.profile.user.avatar_url : 'src/assets/images/default_avatar.png'"
                            />
                        </div>
                        <!-- 头像区域结束 -->
                    </div>
                    <!-- 发送消息区域结束 -->
                </div>
            </van-pull-refresh>
        </div>
        <!-- 消息区域结束 -->

        <!-- 操作区域开始 -->
        <div class="opt-wrap">
            <van-field
                v-model="sendMessageParams.contents"
                center
                clearable
                placeholder="请输入消息"
                style="width: 74%;"
            />

            <!-- 操作按钮开始 -->
            <div class="opt-box">

                <!-- 表情按钮 -->
                <i class="iconfont icon-biaoqing" @click="handleShowEmojiPopup"></i>

                <!-- 私聊按钮 -->
                <van-button color="#27BA9B" size="small" type="primary" @click="handleSendPrivateChat(1)" v-if="sendMessageParams.contents && route.query.mode == '1'">发消息</van-button>

                <!-- 群聊按钮 -->
                <van-button color="#27BA9B" size="small" type="primary" @click="handleSendGroupChat(1)" v-if="sendMessageParams.contents && route.query.mode == '2'">发消息</van-button>

                <!-- 更多操作按钮 -->
                <van-button style="margin-left: 10px;" color="#27BA9B" size="small" round icon="plus" plain type="primary" @click="handleShowMoreOperatePopup" v-if="sendMessageParams.contents == ''"/>
            </div>
            <!-- 操作按钮结束 -->
        </div>
        <!-- 操作区域结束 -->

        <!-- 更多操作弹层区域开始 -->
        <van-popup
            v-model:show="moreOperatePopup"
            closeable
            round
            position="bottom"
            :style="{ height: '24%' }"
        >
            <div class="popup-wrap">
                <div class="title-box">更多操作</div>
                <div class="operate-box">
                    <!-- 上传图片 -->
                    <div class="operate-item">
                        <van-uploader
                            :after-read="handleAfterRead"
                        >
                            <div class="operate">
                                <i class="iconfont icon-tupian"></i>
                            </div>
                        </van-uploader>
                        <div class="text">图片</div>
                    </div>

                    <!-- 上传视频 -->
                    <div class="operate-item">
                        <van-uploader
                            :after-read="handleVideoAfterRead"
                        >
                            <div class="operate">
                                <i class="iconfont icon-shipinshangchuan"></i>
                            </div>
                        </van-uploader>
                        <div class="text">视频</div>
                    </div>

                    <!-- 上传音频 -->
                    <div class="operate-item">
                        <van-uploader
                            :after-read="handleAudioAfterRead"
                        >
                            <div class="operate">
                                <i class="iconfont icon-yinpinshangchuan"></i>
                            </div>
                        </van-uploader>
                        <div class="text">音频</div>
                    </div>

                    <!-- 位置 -->
                    <div class="operate-item" @click="handleSendPosition">
                        <div class="operate">
                            <i class="iconfont icon-dizhi"></i>
                        </div>
                        <div class="text">位置</div>
                    </div>
                </div>
            </div>
        </van-popup>
        <!-- 更多操作弹层区域结束 -->

        <!-- 选择表情弹层区域开始 -->
        <van-popup
            v-model:show="emojiPopup"
            round
            position="bottom"
            :style="{ height: '45%' }"
        >
            <div class="popup-wrap">
                <EmojiPicker style="width: 100%;" :native="true" @select="onEmojiClick" />
            </div>
        </van-popup>
        <!-- 选择表情弹层区域结束 -->

        <!-- 位置弹层区域开始 -->
        <van-popup
            v-model:show="positionPopup"
            round
            closeable
            position="bottom"
            :style="{ height: '90%' }"
        >
            <div class="popup-wrap">
                <van-loading color="#27BA9B" size="50px" v-if="positionLoading">加载中...</van-loading>
                <TridentMap
                    v-if="positionPopup"
                    :currentPosition="currentPosition"
                />
            </div>
        </van-popup>
        <!-- 位置弹层区域结束 -->
    </div>
</template>

<script lang="ts" setup>
import { reqAddChatTargetAPI } from '@/apis/chatTarget'
import { reqFriendDetailAPI } from '@/apis/friend'
import { reqGroupChatDetailAPI } from '@/apis/groupChat'
import { reqMessageListAPI, reqReadMessageAPI } from '@/apis/message'
import { useUserStore } from '@/store/modules/user'
import { MessageListParam, Position, SendMessageParams } from '@/types/chat'
import type { AddChatTargetParams } from '@/types/chatTarget'
import type { Friend } from '@/types/friend'
import type { GroupChat } from '@/types/groupChat'
import { loadingInstance, messageList, socket } from '@/utils/socketIO'
import { cloneDeep } from 'lodash'
import { showImagePreview, showLoadingToast, showSuccessToast, showToast } from 'vant'
import { inject, nextTick, onMounted, onUnmounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { formatTime } from '@/utils/tools'
import dayjs from 'dayjs'
import EmojiPicker from 'vue3-emoji-picker'
import 'vue3-emoji-picker/css'
import { reqUploadImageAPI } from '@/apis/uploadFile'
import AMapLoader from "@amap/amap-jsapi-loader"


// ----------------- 定义全局变量开始 -----------------
// 全局属性
const global: any = inject('global')

// 路由
const route = useRoute()

// 用户存储
const userStore = useUserStore()

// 骨架屏
const isSkeleton = ref<boolean>(false)


// console.log('参数 mode =', route.query.mode);
// console.log('参数 id =', route.query.id);
// console.log('参数 gid =', route.query.gid);
// console.log('参数 path =', route.path);
// console.log('参数 is_open =', route.query.is_open);

// 当前滚动高度
const currentScrollHeight = ref<number>(0)
// ----------------- 定义全局变量结束 -----------------


// 加载完成
onMounted(async () => {
    let params = ref<AddChatTargetParams>()
    if (route.query.mode == '1') { // 私聊
        await getFriendInfo()
        params.value = {
            mode: 1,
            target_info: {
                target_id: friend.value?.info.uid as never,
                name: friend.value?.info.username as never,
                friend_id: route.query.id as never,
                avatar_url: friend.value?.info.avatar_url as never
            }
        }
    } else if (route.query.mode == '2') { // 群聊
        await getGroupChatInfo()
        let groupChatImageUrl = ''
        groupChat.value?.member.forEach((item, key) => {
            if (key < 9) {
                groupChatImageUrl += item.avatar_url + ','
                return
            }
        })

        // 将字符串中最后一个元素","逗号去掉
        groupChatImageUrl = groupChatImageUrl.substring(0, groupChatImageUrl.lastIndexOf(','))

        params.value = {
            mode: 2,
            target_info: {
                target_id: groupChat.value?.id as never,
                name: groupChat.value?.name as never,
                avatar_url: groupChatImageUrl
            }
        }
    }

    if (route.query.is_open) {
        await reqAddChatTargetAPI(params.value as never)
    }

    // 设置消息列表参数
    if (route.query.mode == '1') { // 私聊参数
        messageListParams.value.from_uid = userStore.profile.user.uid
        messageListParams.value.to_uid = friend.value?.info.uid
        messageListParams.value.event_type = 'private-chat'
        messageListParams.value.mode = 1
        messageListParams.value.is_dialogue = 1
    } else if (route.query.mode == '2') { // 群聊参数
        messageListParams.value.to_uid = groupChat.value?.id
        messageListParams.value.event_type = 'group-chat'
        messageListParams.value.mode = 2
    } else {

    }

    console.log('messageListParams = ', messageListParams.value);

    if (route.query.mode == '1') {
        // 私聊,更新消息为已读
        await reqReadMessageAPI(userStore.profile.user.uid)
    }
    
    // 获取消息
    await getMessageList()

    // 始终显示新一条消息
    await nextTick(() => {
        currentScrollHeight.value = document.documentElement.scrollHeight
        window.scrollTo(0, document.body.scrollHeight)
    })
})

// 卸载完成
onUnmounted(() => {
    console.log('----------------- onUnmounted -----------------');
    // 重置消息列表
    messageList.value = []
})


// ----------------- 处理发送位置开始 -----------------
// 位置弹层
const positionPopup = ref<boolean>(false)

// 当前位置
const currentPosition = ref<Position>()

// 位置加载中
const positionLoading = ref<boolean>(false)

// 显示位置
const handleShowPosition = (position: Position) => {
    positionLoading.value = true
    currentPosition.value = position
    positionPopup.value = true
    setTimeout(() => {
        positionLoading.value = false
    }, 1000)
}

// 定位加载中
const locateLoading: any = ref(null)

// 发送位置
const handleSendPosition = () => {
    console.log('------------- handleSendPosition ---------------');
    locateLoading.value = showLoadingToast({
        message: '正在定位中...',
        duration: 10000
    })
    
    AMapLoader.load({
        // 申请好的Web端开发者Key，首次调用 load 时必填
        key: "e539649d8af924db8f22bc5b3a282b8e",

        // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        version: "2.0",

        // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        plugins: ["AMap.Geolocation"],
    }).then((AMap) => {
        console.log('------------- 定位中 ---------------');
        // 定位
        AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, // 是否使用高精度定位，默认：true
                timeout: 10000, // 设置定位超时时间，默认：无穷大
                offset: [10, 20],  // 定位按钮的停靠位置的偏移量
                zoomToAccuracy: true,  //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                position: 'RB' //  定位按钮的排放位置,  RB表示右下
            })

            geolocation.getCurrentPosition(function(status: string, result: any){
                if(status=='complete'){
                    onComplete(result)
                }else{
                    onError(result)
                }
            });

            function onComplete (data: any) {
                // data是具体的定位信息
                console.log('onComplete data = ', data)
                // props.currentPosition.lat = data.position.lat
                // props.currentPosition.lng = data.position.lng
                locateLoading.value.close()

                // 发送消息
                sendMessageParams.value.lat = data.position.lat
                sendMessageParams.value.lng = data.position.lng

                console.log('sendMessageParams = ', sendMessageParams.value);
                

                if (route.query.mode == '1') { // 私聊
                    handleSendPrivateChat(5)
                } else if (route.query.mode == '2') { // 群聊
                    handleSendGroupChat(5)
                }
                moreOperatePopup.value = false
            }

            function onError (data: any) {
                showToast('定位失败')
                // 定位出错
                console.log('onError data = ', data)
                locateLoading.value.close()
            }
        })
    }).catch((e) => {
        console.log(e);
    })
}
// ----------------- 处理发送位置结束 -----------------



// ----------------- 处理预览图片开始 -----------------
const handleShowImagePreview = (image: string) => {
    showImagePreview([image])
}
// ----------------- 处理预览图片结束 -----------------



// ----------------- 处理图片上传开始 -----------------
const handleAfterRead = async (file: any) => {
    console.log(file);
    // 图片类型限制
	const imageTypes = [
		'image/jpg',
		'image/jpeg',
		'image/png',
	]
	if (!imageTypes.includes(file.file.type)) {
		showToast('图片类型要求：jpeg、jpg、png')
		return false
	}

	// 图片大小限制 2M
	if (file.file.size > 1024 * 1024 * 2) {
		showToast('图片大小不能超过2M')
		return false
	}


    const formData = new FormData()
    // 必须要第三个参数，名称随便
    formData.append("image", file.file, 'xxx.jpg')
    formData.append("image_path", 'easychat/message')
    // 请求上传图片接口
    const {data:result} = await reqUploadImageAPI(formData)
    if (result.status_code != 200) {
        showToast(result.message)
        return false
    }

    console.log('result = ', result);
    if (result.status_code != 200) {
        showToast('发送图片失败')
        return false
    }
    
    // 发送消息
    sendMessageParams.value.image_url = result.data.relative_url
    if (route.query.mode == '1') {
        handleSendPrivateChat(2)
    } else {
        handleSendGroupChat(2)
    }
    moreOperatePopup.value = false
}
// ----------------- 处理图片上传结束 -----------------



// ----------------- 处理视频上传开始 -----------------
const handleVideoAfterRead = async (file: any) => {
    showToast('该功能尚未开通，敬请期待')
    return false
}
// ----------------- 处理视频上传结束 -----------------



// ----------------- 处理音频上传开始 -----------------
const handleAudioAfterRead = async (file: any) => {
    showToast('该功能尚未开通，敬请期待')
    return false
}
// ----------------- 处理音频上传结束 -----------------



// ----------------- 处理发送消息开始 -----------------
// 发消息参数
const sendMessageParams = ref<SendMessageParams>({
    id: 0,
    from_uid: userStore.profile.user.uid,
    from_user: {
        uid: userStore.profile.user.uid,
        username: userStore.profile.user.username,
        mobile: userStore.profile.user.mobile,
        avatar_url: userStore.profile.user.avatar_url
    },
    to_uid: 0,
    mode: 1,
    type: 1,
    contents: '',
    image_url: '',
    voice_url: '',
    video_url: '',
    is_read: 0,
    status: 1,
    create_time: ''
});

// 私聊
const handleSendPrivateChat = async (type: number) => {
    console.log('-------------- 私聊 --------------');
    
    if (type == 1 && sendMessageParams.value.contents == '') {
        showToast('请输入消息')
        return false
    }

    // 设置消息接受者
    sendMessageParams.value.to_uid = friend.value?.info.uid as never
    sendMessageParams.value.to_user = {
        uid: friend.value?.info.uid as never,
        username: friend.value?.info.username + '',
        mobile: friend.value?.info.mobile + '',
        avatar_url: friend.value?.info.avatar_url
    }

    // 设置消息事件
    sendMessageParams.value.event_type = 'private-chat'

    // 设置消息模式：1-私聊，2-群聊，3-通知
    sendMessageParams.value.mode = 1

    // 设置消息类型：1-文本，2-图片，3-语音，4-视频，5-表情
    sendMessageParams.value.type = type

    // 设置创建时间
    sendMessageParams.value.create_time = dayjs().format('YYYY-MM-DD HH:mm:ss')

    console.log('发送消息数据 = ', sendMessageParams.value)

    // 打开加载中提示
    loadingInstance.value.open()

    const message = cloneDeep(sendMessageParams.value)

    // 添加消息到消息列表
    messageList.value.push(message)

    // 发送消息
    socket.value.emit('private-chat', message)

    // 清空消息内容
    sendMessageParams.value.contents = ''


    // 始终显示新一条消息
    await nextTick()
    window.scrollTo(0, document.body.scrollHeight)
    loadingInstance.value.close()
}

// 群聊
const handleSendGroupChat = async (type: number) => {
    if (type == 1 && sendMessageParams.value.contents == '') {
        showToast('请输入消息')
        return false
    }

    // 设置消息接受者
    sendMessageParams.value.to_uid = groupChat.value?.id as never

    // 设置消息事件
    sendMessageParams.value.event_type = 'group-chat'

    // 设置消息模式：1-私聊，2-群聊，3-通知
    sendMessageParams.value.mode = 2

    // 设置消息类型：1-文本，2-图片，3-语音，4-视频，5-表情
    sendMessageParams.value.type = type

    // 设置创建时间
    sendMessageParams.value.create_time = dayjs().format('YYYY-MM-DD HH:mm:ss')

    console.log('发送消息数据 = ', sendMessageParams.value)

    loadingInstance.value.open()

    const message = cloneDeep(sendMessageParams.value)

    // 添加消息到消息列表
    messageList.value.push(message)

    console.log('message =', message)

    // 发送消息
    socket.value.emit('group-chat', message)

    // 清空消息内容
    sendMessageParams.value.contents = ''

    // 始终显示新一条消息
    await nextTick()
    window.scrollTo(0, document.body.scrollHeight)
    loadingInstance.value.close()
}
// ----------------- 处理发送消息结束 -----------------



// ----------------- 处理加载更多开始 -----------------
const handleLoadMore = async () => {
    messageListParams.value.page++

    // 当前页小于等于总页数，才发起请求
    if (messageListParams.value.page <= totalPage.value ) {
        await getMessageList()

        await nextTick(() => {
            window.scrollTo(0, document.documentElement.scrollHeight - currentScrollHeight.value - 400)
            currentScrollHeight.value = document.documentElement.scrollHeight
        })
    } else {
        showSuccessToast('没有更多消息')
    }

    // 关闭加载中
    loading.value = false
}
// ----------------- 处理加载更多结束 -----------------



// ----------------- 处理消息列表开始 -----------------
// 加载中
const loading = ref(false)

// 总条数
const total = ref<number>(0)

// 总页数
const totalPage = ref<number>(0)

// 消息列表参数
const messageListParams = ref<MessageListParam>({
    from_uid: 0,
    to_uid: 0,
    mode: 0,
    event_type: '',
    is_dialogue: 0,
    type: 0,
    page: 1,
    page_size: 10,
    sort_field: 'create_time',
    sort_type: 'desc'
})

// 获取消息列表
const getMessageList = async () => {
    isSkeleton.value = true
    const result = await reqMessageListAPI(messageListParams.value)
    const messages = result.data.messages.reverse()
    messageList.value.unshift(...messages)
    console.log('messageList = ', messageList.value);
    
    total.value = result.data.total
    totalPage.value = result.data.total_page
    loading.value = false
    isSkeleton.value = false
}
// ----------------- 处理消息列表结束 -----------------



// ----------------- 处理好友信息开始 -----------------
// 获取好友信息
const friend = ref<Friend>()

// 获取好友信息
const getFriendInfo = async () => {
    const result = await reqFriendDetailAPI(route.query.id as never)
    friend.value = result.data
}
// ----------------- 处理好友信息开始 -----------------



// ----------------- 处理群聊信息开始 -----------------
// 群聊信息
const groupChat = ref<GroupChat>()

// 获取群聊信息
const getGroupChatInfo = async () => {
    const result = await reqGroupChatDetailAPI(route.query.gid as never)
    groupChat.value = result.data
}
// ----------------- 处理群聊信息结束 -----------------



// ----------------- 处理更多操作开始 -----------------
const moreOperatePopup = ref<boolean>(false)

// 显示选择更多操作弹层
const handleShowMoreOperatePopup = () => {
    moreOperatePopup.value = true
}
// ----------------- 处理更多操作结束 -----------------



// ----------------- 处理表情操作开始 -----------------
const emojiPopup = ref<boolean>(false)

// 显示表情弹层
const handleShowEmojiPopup = async () => {
    emojiPopup.value = true
}

// 选择表情
const onEmojiClick = (emoji: any) => {
    console.log('emoji = ', emoji);
    sendMessageParams.value.contents += emoji.i
    emojiPopup.value = false
}
// ----------------- 处理表情操作结束 -----------------
</script>

<style scoped lang="scss">
::v-deep(.van-skeleton) {
    padding: 0px 0px;
}
page,
.container {
    // padding: 50px 10px 50px 10px;
    height: 100vh;
    // background-color: red;
    .message-wrap {
        padding: 45px 15px;
        // 群公告区域开始
        .notice-wrap {
            background-color: #e9e9e9;
            // display: flex;
            margin: 25px 0;
            padding: 0 10px;
            border-radius: 5px;
            height: 40px;
            line-height: 40px;
        }
        // 群公告区域结束
        // 发消息区域开始
        .msg-to-wrap {
            margin: 25px 0;
            display: flex;
            .avatar-box {
                margin-right: 10px;
                border: 1px solid #d3f4ed;
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100%;
                overflow: hidden;
            }
            .content-box {
                flex: 1;
                img {
                    width: 100px;
                    height: 100px;
                    border-radius: 5px;
                }

                .title-panel {
                    display: flex;
                    align-items: center;
                    .username {
                        font-weight: bold;
                        font-size: 13px;
                    }
                    .time {
                        color: gainsboro;
                        font-size: 14px;
                        margin-left: 5px;
                    }
                    padding-bottom: 10px;
                }

                .msg-to-panel {
                    display: flex;
                    .message {
                        background-color: #fff;
                        padding: 10px;
                        max-width: 280px;
                        border-radius: 8px;
                    }
                    position: relative;

                    // 蒙版
                    .masking {
                        background-color: rgba(255, 255, 255, 0);
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100px;
                        height: 100px;
                        border-radius: 10px;
                    }
                }
            }
        }
        // 发消息区域结束

        // 接收消息区域开始
        .msg-from-wrap {
            margin: 40px 0;
            display: flex;
            justify-content: flex-end;
            .content-from-box {
                display: flex;
                justify-content: flex-end;
                .content-from-panel {
                    .time {
                        display: flex;
                        justify-content: flex-end;
                        color: gainsboro;
                        font-size: 14px;
                        padding-bottom: 15px;
                    }

                    img {
                        width: 100px;
                        height: 100px;
                        border-radius: 5px;
                    }

                    .msg-panel {
                        background-color: #27BA9B;
                        padding: 10px;
                        line-height: 22px;
                        max-width: 300px;
                        border-radius: 10px;
                        color: #fff;
                        position: relative;

                        .masking {
                            background-color: rgba(255, 255, 255, 0);
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100px;
                            height: 100px;
                            border-radius: 10px;
                        }
                    }
                }
            }
            .avatar-from-box {
                margin-left: 5px;
                border: 1px solid #27BA9B;
                width: 50px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100%;
                overflow: hidden;
            }
        }
        // 接收消息区域结束

        // 骨架屏区域开始
        .skeleton-item {
            margin: 30px 0px;
            // 左边
            .skeleton-left-box {
                display: flex;
                align-items: center;
                width: 100%;
                .text {
                    margin-left: 10px;
                    flex: 1;
                }
            }
            // 右边
            .skeleton-right-box {
                display: flex;
                align-items: center;
                width: 100%;
                .text {
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    align-items: flex-end;
                    margin-left: 10px;
                    flex: 1;
                    margin-right: 10px;
                }
            }
        }
        // 骨架屏区域结束
    }

    // 操作区域开始
    .opt-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        border-top: 1px solid #dadada;
        .opt-box{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }
        .icon-biaoqing {
            font-size: 38px;
            color: #27BA9B;
        }
    }
    // 操作区域结束

    // 弹层区域开始
    .popup-wrap {
        .title-box {
            margin-top: 20px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            position: fixed;
            top: 100;
            left: 0;
            right: 0;
            width: 100%;
            background-color: #fff;
            padding-bottom: 10px;
            border-bottom: 1px solid #dadada;

            display: flex;
            align-items: center;
            justify-content: center;
            .icon-guanbi {
                position: absolute;
                right: 10px;
                font-size: 28px;
                color: #000;
            }
        }

        .operate-box {
            padding-top: 60px;
            display: flex;
            justify-content: space-evenly;

            .operate-item {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                width: 80px;
                height: 80px;
                background-color: #F7F8FA;
                margin-top: 10px;
                border-radius: 8px;
                overflow: hidden;
                .operate {
                    .iconfont {
                        font-size: 30px;
                        color: #b6b6b6;
                    }
                }
                .text {
                    bottom: 90px;
                    color: #b6b6b6;
                    font-size: 14px;
                }
            }
        }
    }
}
</style>